<template>
  <div class="homepage">
    <div class="homepage_qipao"></div>
    <div class="homepage_iphone">
      <div>
        <el-carousel trigger="click" :interval="time" indicator-position="none" height="686px">
          <el-carousel-item v-for="item in imgList" :key="item">
            <img :src="item" class="img" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <img src="../assets/liuhai.png" alt />
    </div>
    <div class="homepage_logo">
      <img src="../assets/dalogo.png" alt />
      <img src="../assets/title.png" alt />
    </div>
    <!-- <div class="homepage_down">
      <ul>
        <li>
          <img src="../assets/pingguo.png" alt />
          <p>IOS下载</p>
        </li>
        <li>
          <img src="../assets/anzhuo.png" alt />
          <p>android下载</p>
        </li>
      </ul>
      <ul>
        <li>
          <img src="../assets/xiazai.jpg" alt />
        </li>
        <li>手机扫描二维码下载</li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import jie1 from "../assets/jie1.png";
import jie2 from "../assets/jie2.png";
import jie3 from "../assets/jie3.png";
import jie4 from "../assets/jie4.png";
export default {
  data() {
    return {
      imgList: [jie1, jie2, jie3, jie4],
      time: 2000,
    };
  },
};
</script>

<style>
.homepage {
  width: 1920px;
  position: relative;
  overflow: hidden;
  height: 902px;
}
.homepage_qipao {
  width: 781px;
  height: 582px;
  margin-top: 211px;
  margin-left: 197px;
  background: url("../assets/qipao.png") no-repeat;
  background-size: 100%;
  z-index: 50;
}
.homepage_iphone {
  width: 530px;
  height: 850px;
  position: absolute;
  top: 0;
  left: 261px;
  background: url("../assets/shouji.png") no-repeat;
  background-size: 100%;
}
.homepage_iphone > div {
  width: 316px;
  height: 686px;
  margin-left: 145px;
  margin-top: 67px;
  overflow: hidden;
  border-radius: 30px;
}
.img {
  width: 100%;
}
.homepage_iphone > img {
  position: absolute;
  top: 67px;
  right: 140px;
  z-index: 50;
}
.homepage_logo {
  width: 675px;
  height: 250px;
  position: absolute;
  top: 96px;
  right: 375px;
  background: url("../assets/xy-planet.png") no-repeat;
  background-size: 100%;
}
.homepage_logo > img:nth-child(1) {
  margin-left: 300px;
  margin-top: 28px;
  width: 101px;
  height: 102px;
}
.homepage_logo > img:nth-child(2) {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 460px;
  margin-left: -230px;
}
.homepage_down {
  width: 640px;
  height: 250px;
  position: absolute;
  top: 420px;
  right: 388px;
}
.homepage_down > ul {
  float: left;
}
.homepage_down > ul:nth-child(1) > li {
  width: 342px;
  height: 92px;
  border: 1px solid #ffffff;
  box-shadow: 0px 5px 2px 0px rgba(30, 72, 214, 0.34);
  border-radius: 14px;
  font-size: 43px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #ffffff;
  line-height: 92px;
}
.homepage_down > ul:nth-child(1) > li > img {
  float: left;
  height: 31px;
  margin-left: 29px;
  margin-top: 30.5px;
}
.homepage_down > ul:nth-child(1) > li > p {
  float: left;
  text-align: center;
  width: 280px;
}
.homepage_down > ul:nth-child(1) > li:nth-child(2){
  margin-top: 25px;
}
.homepage_down > ul:nth-child(2) {
  margin-left: 74px;
}
.homepage_down > ul:nth-child(2) > li:nth-child(1) {
  width: 214px;
  height: 214px;
  background: white;
}
.homepage_down > ul:nth-child(2) > li:nth-child(1) > img {
  width: 196px;
  height: 196px;
  margin: 9px;
}
.homepage_down > ul:nth-child(2) > li:nth-child(2) {
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  width: 214px;
  text-align: center;
  margin-top: 14px;
}
</style>
